<template>
    <div>
        <h2 v-if="dataList.length == 0" style="text-align: center;color:red">暂无维修历史记录</h2>

        <div>
            <!-- 内容区域 -->
            <ul class="content-wrap" v-for="(cotentItem, contentIndex) in dataList" :key="contentIndex">
                <li class="left">
                    <div class="history-wrap">
                        <span
                            ><p class="name">日志生成时间：</p>
                            {{ cotentItem.mainBoard.updateTime }}</span
                        >
                        <span
                            ><p class="name">SN：</p>
                            {{ cotentItem.mainBoard.serialNumber }}</span
                        >
                        <span
                            ><p class="name">Hash IC：</p>
                            {{ cotentItem.mainBoard.miningStrategy }}</span
                        >
                        <span
                            ><p class="name">模式：</p>
                            {{ cotentItem.mainBoard.serialNumber }}</span
                        >
                        <span
                            ><p class="name">工作状态：</p>
                            {{ cotentItem.mainBoard.status }}</span
                        >
                        <span
                            ><p class="name">时长：</p>
                            {{ cotentItem.mainBoard.totalRunningTime }}</span
                        >
                        <span
                            ><p class="name">本地算力(TH)：</p>
                            {{ cotentItem.mainBoard.averageHashRate }}</span
                        >
                        <span
                            ><p class="name">软件版本：</p>
                            {{ cotentItem.mainBoard.swVersion }}</span
                        >
                        <span
                            ><p class="name">老化结果：</p>
                            <p :class="cotentItem.mainBoard.runResult === 'pass' ? '':'redColor'">{{ cotentItem.mainBoard.runResult }}</p>
                            </span
                        >
                        <span class="redColor" v-if="cotentItem.mainBoard.error != '0x0'"
                            ><p class="name">Error Code：</p>
                            {{ cotentItem.mainBoard.error }}</span
                        >
                        <span class="redColor" v-if="cotentItem.mainBoard.error != '0x0'"
                            ><p class="name">错误描述：</p>
                            <p class="redColor">{{ cotentItem.mainBoard.errorDescribe }}</p>
                            <!-- <div v-for="(item, index) in JSON.parse(cotentItem.errorDetail)" :key="index">
                                <span>{{ item }}</span>
                            </div> -->
                        </span>
                    </div>
                </li>

                <ul class="right">
                    <ul
                        class="item-wrap"
                        v-for="(board, boardIndex) in cotentItem.mainBoard.thirdChildren"
                        :key="boardIndex"
                        :class="boardIndex == cotentItem.mainBoard.thirdChildren.length - 1 ? '' : 'border-bottom'"
                    >
                        <li class="form">
                            <span class="spanItem"
                                ><p class="name">{{ board.computeBoardName }}：</p>
                                {{ board.mainBoardSn }}</span
                            >
                            <span class="spanItem"
                                ><p class="name">算力版状态：</p>
                                {{ board.errorNum === '4000' ? 'pass' : board.error === '0' ? 'pass' : 'fail' }}</span
                            >
                            <span class="spanItem"
                                ><p class="name">Error Code：</p>
                                {{ board.error }}</span
                            >
                            <span class="spanItem"
                                ><p class="name">本地算力(TH)：</p>
                                {{ board.averageHashRate }}</span
                            >
                            <span class="errorItem" v-if="board.errorNum != '4000' && board.errorNum != '0'"
                                ><p class="name">错误描述：</p>
                                <span class="redColor">{{ board.errorDescribe }}</span>
                                <!-- <div>
                                    <ul
                                        class="redColor"
                                        style="display: flex; flex-direction: column"
                                        v-for="(error, errorIndex) in JSON.parse(board.errorDetail)"
                                        :key="errorIndex"
                                    >
                                        <li v-for="(item, index) in error" :key="index">
                                            {{ item }}
                                        </li>
                                    </ul>
                                </div> -->
                            </span>
                        </li>
                    </ul>
                </ul>

                <!-- 维修历史记录 -->
                <li class="repairHistory">
                    <h3 class="title">维修历史记录</h3>

                    <ul
                        class="repairBox"
                        :class="cotentItem.repairTypeList.length > 1 ? 'border-bottom' : ''"
                        v-for="(repairItem, repairIndex) in cotentItem.repairTypeList"
                        :key="repairIndex"
                    >
                        <span><span style="font-weight: bold">维修方式:</span>{{ repairItem.repairType }}</span>
                        <div class="positionBox" v-if="repairItem.repairType === '换风扇'">
                            <span style="font-weight: bold">风扇位置:</span>
                            <ul class="position" v-for="(position, positionIndex) in repairItem.fanPosition" :key="positionIndex">
                                <li>{{ position }}</li>
                            </ul>
                        </div>
                        <div v-if="repairItem.repairType != '换风扇' && repairItem.repairType != '组装问题' && repairItem.repairType != '其他'">
                            <p><span style="font-weight: bold">旧SN:</span>{{ repairItem.initialSn }}</p>
                            <p><span style="font-weight: bold">新SN:</span>{{ repairItem.newSn }}</p>
                        </div>
                    </ul>

                    <div v-if="cotentItem.remarks">
                        <span style="font-weight: bold">备注:</span>{{ cotentItem.remarks }}
                    </div>

                    <div>
                        <span style="font-weight:bold">维修时间:</span>{{ cotentItem.createTime }}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import getRepairHistoryList from '../../api/getRepairHistoryList';
export default {
    data() {
        return {
            dataList: [], //数据列表
        };
    },
    created() {
        let masterBoardSn = this.$route.query.sn;
        this.historyList(masterBoardSn);
    },
    methods: {
        historyList(masterBoardSn) {
            getRepairHistoryList({
                sn: masterBoardSn
            }).then((res) => {
                // console.log(res);
                this.dataList = res.data.data;
            });
        },
    }
};
</script>

<style lang="less" scoped>
.content-wrap {
    display: flex;
    // justify-content: space-between;
    border-bottom: 2px solid #242F42;
    margin-top: 15px;
    .left {
        width: 40%;
        padding: 5px;
        // border-radius: 10px;
        background-color: #fff;
        .history-wrap {
            span {
                display: flex;
                align-items: center;
                margin: 5px 0;
                .name {
                    color: black;
                    font-weight: bold;
                }
            }
            .redColor {
                color: #e0001b;
            }
        }
    }
}

.right {
    width: 40%;
    border-left: 2px solid #F0F0F0;
    // margin-left: 10px;
    // border-radius: 10px;
    background-color: #fff;
    .item-wrap {
        margin: 2px 0;
        padding: 5px;
        .form {
            .spanItem {
                display: flex;
                align-items: center;
                margin: 5px 0;
                .name {
                    color: black;
                    font-weight: bold;
                }
            }
            .errorItem {
                display: flex;
                // flex-flow: column wrap;
                flex-flow: wrap;
                .name {
                    color: black;
                    font-weight: bold;
                }
                .redColor {
                    color: #e0001b;
                }
            }
        }
    }
    .border-bottom {
        border-bottom: 2px solid #f0f0f0;
    }
}

.repairHistory {
    width: 20%;
    // margin-left: 10px;
    border-left: 2px solid #F0F0F0;
    padding: 5px;
    // border-radius: 10px;
    background-color: #fff;
    .title {
        text-align: center;
    }
    .repairBox {
        margin: 5px 0;
        padding: 2px 0;
        .positionBox {
            display: flex;
            align-items: center;
            .position {
                margin: 0 2px;
            }
        }
    }
    .border-bottom {
        border-bottom: 2px solid #f0f0f0;
    }
}
</style>